<template>
  <div class="car-1" @click="add">
    <van-image width="50" height="50" :src="objs[item.icon]" />
    <div>
      <p>{{ item.name }}</p>
      <p>{{ item.shi }}</p>
    </div>
    <van-icon name="arrow" size="30" />
  </div>
  <van-popup
    v-model:show="showRight"
    position="right"
    closeable
    close-icon-position="top-left"
    :style="{
      width: '100%',
      height: '100%',
      background: '#ececec',
      paddingTop: '50px',
      paddingLeft: '10px',
      paddingRight: '10px'
    }"
  >
    <popUp :title="title">
      <div>姓名：</div>
      <div>学院：</div>
      <div>预警内容：</div>
      <div>预警时间：</div>
      <div>预警等级：</div>
    </popUp>
    <popUp :title="titles">
      <van-tabs v-model:active="active">
        <van-tab title="标签 1">内容 1</van-tab>
        <van-tab title="标签 2">内容 2</van-tab>
      </van-tabs>
    </popUp>
  </van-popup>
</template>

<script lang="ts" setup>
import popUp from './popUp.vue'
import img1 from '@/assets/My/p1.png'
import img2 from '@/assets/My/p2.png'
import img3 from '@/assets/My/p3.png'
import img4 from '@/assets/My/p4.png'
import { ref } from 'vue'
const title = '基础信息'
const titles = '预警明细'
const showRight = ref(false)
const objs: any = ref({
  '1': img1,
  '2': img2,
  '3': img3,
  '4': img4
})
const add = () => {
  showRight.value = true
}
defineProps<{
  item: {
    icon: string
    name: string
    shi: string
  }
}>()
const active = ref(0)
</script>

<style lang="scss" scoped>
.car-1 {
  width: 100%;
  height: 80px;
  border-bottom: 1px solid #797575;

  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
